<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.name" placeholder="姓名" class="handle-input mr10"></el-input>
                <el-input v-model="query.phone" placeholder="账号(手机号码)" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
			</div>
			<el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column>
				<el-table-column prop="phone" label="账号(手机号码)" :min-width="120"></el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="role" label="用户类型" align="center" :min-width="100">
					<template #default="scope">
						<el-tag v-if="scope.row.role == 0" type="success">普通用户</el-tag>
						<el-tag v-if="scope.row.role == 1" type="primary">快递员</el-tag>
						<el-tag v-if="scope.row.role == 2" type="warning">网点管理员</el-tag>
						<el-tag v-if="scope.row.role == 3" type="info">系统管理员</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" :min-width="160" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="handleEdit(scope.row)">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.row.id)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageNum"
					:page-size="query.pageSize"
					:total="query.total"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editVisible" width="50%">
			<el-form label-width="120px">
                <el-form-item label="账号(手机号码)">
					<el-input v-model="editForm.phone" disabled></el-input>
				</el-form-item>
				<el-form-item label="姓名">
 					<el-input v-model="editForm.name"></el-input>
				</el-form-item>
				<el-form-item label="用户类型" v-if="editForm.role == 1 || editForm.role == 2">
					<el-select v-model="editForm.role" placeholder="请选择" :disabled="editForm.role == 1 || editForm.role == 2">
						<el-option v-for="item in allRoleOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户类型" v-else="editForm.role == 1 || editForm.role == 2">
					<el-select v-model="editForm.role" placeholder="请选择">
						<el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>


		<!-- 新增弹出框 -->
		<el-dialog title="新增" v-model="addVisible" width="50%">
			<el-form label-width="120px">
				<el-form-item label="账号(手机号码)">
					<el-input v-model="addForm.phone"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input type="password" v-model="addForm.password"></el-input>
				</el-form-item>
				<el-form-item label="确认密码">
					<el-input type="password" v-model="addForm.rePassword"></el-input>
				</el-form-item>
				<el-form-item label="用户类型">
					<el-select v-model="addForm.role" placeholder="请选择">
						<el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveAdd">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { getWebUserListApi, addWebUserApi, updateWebUserApi,deleteWebUserApi} from '../api/index';

const currentUserRole = localStorage.getItem("role");
const query = reactive({
	name: '',
	pageNum: 1,
	pageSize: 10,
	total: 0,
	phone: ''
});
const loading = ref(false);
const tableData = ref([]);
let roleOptions = [];
const allRoleOptions = [
	{id: 0, name: "普通用户"},
	{id: 1, name: "快递员"},
	{id: 2, name: "网点管理员"},
	{id: 3, name: "系统管理员"}
];
if (currentUserRole == '2') {
	roleOptions = [{id: 1, name: "快递员"}]
} else if (currentUserRole == '3') {
	roleOptions = [{id: 0, name: "普通用户"}, {id: 3, name: "系统管理员"}]
} else {
	roleOptions = [];
}


// 获取表格数据
const getData = async () => {
	loading.value = true;
	const res = await getWebUserListApi(query);
	if (res) {
		tableData.value = res.data.content;
		query.total = res.data.count;
	}
	loading.value = false;
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageNum = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageNum = val;
	getData();
};

// 删除操作
const handleDelete = (id: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		const res = await deleteWebUserApi(id);
		if (res) {
			ElMessage.success('删除成功');
			await getData();
		}
	}).catch(() => {});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let editForm = reactive({
    id: "",
	password: "",
	name: "",
	role: "",
	phone: ""
});
const handleEdit = (row: any) => {
	Object.keys(row).map((key: any) => editForm[key] = row[key]);
	editVisible.value = true;
};
const saveEdit = async () => {
	if (!editForm.name) {
		ElMessage.warning("请填写姓名");
		return ;
	}
	if (!editForm.role && editForm.role != '0') {
		ElMessage.warning("请选择用户类型");
		return ;
	}
	const res = await updateWebUserApi(editForm);
	if (res) {
		ElMessage.success("修改成功");
		editVisible.value = false;
		await getData();
	}
};

// 表格新增时弹窗和保存
const addVisible = ref(false);
let addForm = reactive({
	password: "",
	rePassword: '',
	name: "",
	role: 0,
	phone: ""
});
const handleAdd = () => {
	if (currentUserRole == '2') {
		addForm.role = 1
	} else if (currentUserRole == '3') {
		addForm.role = 0
	}
	Object.keys(addForm).map((key: string) => addForm[key] = "");
	addVisible.value = true;
};
const saveAdd = async () => {
	if (!addForm.phone) {
		ElMessage.warning("请填写账号(手机号码)");
		return ;
	}
	if (!addForm.name) {
		ElMessage.warning("请填写姓名");
		return ;
	}
	if (!addForm.password || !addForm.rePassword) {
		ElMessage.warning("请填写密码和确认密码");
		return ;
	}
	if (addForm.password != addForm.rePassword) {
		ElMessage.warning("密码和确认密码不一致");
		return ;
	}
	if (!addForm.role && addForm.role != 0) {
		ElMessage.warning("请选择用户类型");
		return ;
	}

	const res = await addWebUserApi(addForm);
	if (res) {
		ElMessage.success("添加成功");
		addVisible.value = false;
		await getData();
	}
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
